<template>
    <div class="main"  v-loading="loading">
        <el-row class="categoryBox">
            <el-col :span="8"> <h3 class="overflowEllipsis"> 一级模板： {{templateFormData.firstcategoryname}}</h3> </el-col>
            <el-col :span="8"> <h3 class="overflowEllipsis"> 二级模板： {{templateFormData.topcategoryname}}</h3> </el-col>
            <!-- <el-col :span="8"> <h3 class="overflowEllipsis"> 三级模板： {{templateFormData.topcategoryname}}</h3> </el-col> -->
        </el-row>
        <!-- 模板配置表单 -->
        <el-form
            :model="templateFormData"
            class="query-form templateForm"
            label-width="80px"
            :rules="rulesTemplate"
            ref="ruleTemplate"
            size="medium">
            <h3 class="typeTitle"><span>商家模板</span> </h3>
            <div class="templateBG">
                <el-row>
                    <el-col :span="2" :offset="1" class="templateTitle">供应型</el-col>
                    <el-col :span="2"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="merchantTemplateName" label="模板名称">
                            <el-input v-model="templateFormData.merchantTemplateName" placeholder="请选择模板" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" size="medium" @click="addTemplate(1)">关联模板</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="templateBG">
                <el-row>
                    <el-col :span="2" :offset="1" class="templateTitle">营销型</el-col>
                   <!-- <el-col :span="17">
                        <el-form-item prop="template2" label="模板ID">
                            <el-input v-model="templateFormData.template2" placeholder="请选择模板" readonly></el-input>
                        </el-form-item>
                    </el-col>-->
                    <el-col :span="2"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="merchantTemplateName2" label="模板名称">
                            <el-input v-model="templateFormData.merchantTemplateName2" placeholder="请选择模板" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" size="medium" @click="addTemplate(2)">关联模板</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="templateBG">
                <el-row>
                    <el-col :span="2" :offset="1" class="templateTitle">资源型</el-col>
                    <!--<el-col :span="17">
                        <el-form-item prop="template3" label="模板ID">
                            <el-input v-model="templateFormData.template3" placeholder="请选择模板" readonly></el-input>
                        </el-form-item>
                    </el-col>-->
                    <el-col :span="2"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="merchantTemplateName3" label="模板名称">
                            <el-input v-model="templateFormData.merchantTemplateName3" placeholder="请选择模板" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" size="medium" @click="addTemplate(3)">关联模板</el-button>
                    </el-col>
                </el-row>
            </div>
            <!-- <h3 class="typeTitle"><span>商品模板</span></h3>
            <div class="templateBG">
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="goodstemplate" label="模板ID">
                            <el-input v-model="templateFormData.goodstemplate" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="goodsTemplateName" label="模板名称">
                            <el-input v-model="templateFormData.goodsTemplateName" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" size="medium" @click="addTemplate(4)">关联模板</el-button>
                    </el-col>
                </el-row>
            </div> -->
            <el-row >
                <el-col :span="24">
                    <el-button style="margin-right:20px;" @click="goBack">返 回</el-button>
                    <el-button type="primary" @click="submitTemplate">保存设置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <!-- 模板列表弹窗估计有分页 -->
        <el-dialog title="选择模板" width="1000px" v-loading="loading" :visible.sync="dialogTemplate">
            <el-form :model="query"
                     :rules="rulesSearch"
                     ref="ruleSearch"
                     label-width="120px"
                     :inline="true"
                     size="mini"
                     class="demo-ruleForm">
                <el-form-item label="模板名称查询：" prop="name">
                    <el-input v-model="query.name" placeholder="请输入模板名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="templateListData" border >
                <el-table-column property="id" label="模板ID" align="center" width="100"></el-table-column>
                <el-table-column property="name" label="模板名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary"
                                   size="mini"
                                   @click.native="relationTemplate(scope.row)">关联
                        </el-button>
                        <el-button type="primary"
                                   size="mini"
                                   @click.native="seeTemplate(scope.row)">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页模块start-->
            <el-pagination class="pagination-container"
                           background
                           :page-size="query.pageSize"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           layout="total,sizes,prev, pager, next, jumper"
                           :current-page="query.currentPage"
                           :page-sizes="[10, 20, 30, 50]"
                           :total="totalNumber"></el-pagination>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="danger" @click="dialogTemplate = false">关 闭</el-button> -->
                <!-- <el-button type="primary" @click="dialogTemplate = false">确 定</el-button> -->
            </div>
        </el-dialog>
        <!-- 查看模板模板弹窗 -->
        <el-dialog :title="templateName"  width="800px" v-loading="loading" :visible.sync="dialogTemplateInfo">
            <!-- disabled -->
            <el-form :model="item"
                     :inline="true"
                     v-for="item in templateItemFormList" :key="item.id"
                     size="medium"
                     class="demo-ruleForm">
                <div >
                    <!-- label="模板名称：" -->
                    <el-form-item  prop="name">
                        <el-input v-model="item.fieldname" disabled></el-input>
                    </el-form-item>
                    <!--  label="模板类型：" -->
                    <el-form-item prop="name">
                        <el-select v-model="item.fieldtype"
                                   clearable disabled>
                            <el-option v-for="(v,i) in ['文字', '图片', '数字']"
                                       :key="i"
                                       :label="v"
                                       :value="v"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--  label="是否必填：" -->
                    <el-form-item prop="name">
                        <el-select v-model="item.ismust" disabled
                                   clearable>
                            <el-option :label="'必填'"
                                       :value="0"></el-option>
                            <el-option :label="'非必填'"
                                       :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="danger" @click="dialogTemplate = false">关 闭</el-button> -->
                <!-- <el-button type="primary" @click="dialogTemplate = false">确 定</el-button> -->
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        bindMerchantTemplate,
        findTemplateList
    } from "../../api/classification/classification.js";
    export default {
        components: {},
        data() {
            return {
                loading: false, // 页面加载效果
                query: {
                    currentPage: 1,
                    pageSize: 10,
                    templateType: 1,
                    name: null
                },
                rulesSearch: {
                    // searchtext: {
                    //     required: true,
                    //     message: "请输入模板名称",
                    //     trigger: "blur"
                    // }
                },
                totalNumber: 0, // 选择模板弹窗分页总页数
                dialogTemplate: false, // 选择模板弹窗
                dialogTemplateInfo: false, // 模板信息弹窗
                templateFormData: {
                    // 模板配置表单
                    firstcategoryname: "一级分类名字", // 一级分类名字
                    topcategoryname: "二级分类名字", // 二级分类名字
                    // topcategoryname: "三级分类名字", // 三级分类名字
                    template: null, // 供应型模板id
                    merchantTemplateName: null, // 供应型模板名称
                    template2: null, // 营销型模板id
                    merchantTemplateName2: null, // 营销型模板id
                    template3: null, // 资源型模板id
                    merchantTemplateName3: null // 资源型模板名称
                    // goodstemplate: null, // 商品模板id
                    // goodsTemplateName: null // 商品模板名称
                },
                rulesTemplate: {},
                // rulesTemplate: {
                //     // 模板配置表单验证
                //     template: {
                //         required: true,
                //         message: "请输入供应型模板id",
                //         trigger: "blur"
                //     },
                //     merchantTemplateName: {
                //         required: true,
                //         message: "请输入供应型模板名称",
                //         trigger: "blur"
                //     },
                //     template2: {
                //         required: true,
                //         message: "请输入营销型模板id",
                //         trigger: "blur"
                //     },
                //     merchantTemplateName2: {
                //         required: true,
                //         message: "请输入营销型模板名称",
                //         trigger: "blur"
                //     },
                //     template3: {
                //         required: true,
                //         message: "请输入资源型模板id",
                //         trigger: "blur"
                //     },
                //     merchantTemplateName3: {
                //         required: true,
                //         message: "请输入资源型模板名称",
                //         trigger: "blur"
                //     },
                //     goodstemplate: {
                //         required: true,
                //         message: "请输入商品模板id",
                //         trigger: "blur"
                //     },
                //     goodsTemplateName: {
                //         required: true,
                //         message: "请输入商品模板名称",
                //         trigger: "blur"
                //     }
                // },
                type: 1, // 需要关联的类型  1是上产型2是经营性3资源型4是商品模板
                templateListData: [], // 模板列表数据
                templateItemFormList: [], // 模板数据列表
                templateName: "" // 模板名称
            };
        },
        methods: {
            // 搜索模板
            onSearch() {
                this.query.currentPage = 1;
                this.findTemplateList();
            },
            /*弹窗 选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.findTemplateList(); // 重新查询列表
            },
            /*弹窗 点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.findTemplateList(); // 重新查询列表
            },
            // 提交模板表单
            submitTemplate() {
                this.$refs["ruleTemplate"].validate(valid => {
                    if (valid) {
                        console.log();
                        const data = {
                            // goodstemplate: this.templateFormData.goodstemplate,
                            template: this.templateFormData.template,
                            template2: this.templateFormData.template2,
                            template3: this.templateFormData.template3,
                            threeCategoryId: this.templateFormData.topcategoryid
                        };
                        bindMerchantTemplate(data)
                            .then(response => {
                                if (response.code != 0) {
                                    this.$message.error(response.message);
                                    this.loading = false;
                                    return false;
                                }
                                this.$message.success("保存成功！");
                                this.goBack();
                                this.loading = false;
                                // 清空表单
                                // this.$refs["ruleTemplate"].resetFields();
                            })
                            .catch(err => {
                                this.$message.error(err);
                                this.loading = false;
                            });
                    }
                });
            },
            goBack() {
                this.$router.push({
                    path: "/commodity/classification", // 关联商家模板页面
                    query: {
                        type:2
                    }
                });
            },
            // 获取模板列表
            findTemplateList() {
                this.loading = true;
                findTemplateList(this.query)
                    .then(response => {
                        if (response.code != 0) {
                            this.$message.error(response.message);
                            this.loading = false;
                            return false;
                        }
                        console.log(response);
                        this.templateListData = response.data.list || [];
                        this.totalNumber = response.data.totalNumber || 0;
                        this.loading = false;
                        // 清空表单
                    })
                    .catch(err => {
                        this.$message.error(err);
                        this.totalNumber = 0;
                        this.loading = false;
                    });
            },
            // 打开模板列表弹窗
            addTemplate(type) {
                this.type = type;
                this.dialogTemplate = true;
            },
            // 关联模板
            relationTemplate(row) {
                switch (this.type) {
                    case 1: // 供应型模板
                        this.templateFormData.template = row.id;
                        this.templateFormData.merchantTemplateName = row.name;
                        break;
                    case 2: // 营销型模板
                        this.templateFormData.template2 = row.id;
                        this.templateFormData.merchantTemplateName2 = row.name;
                        break;
                    case 3: // 资源型模板
                        this.templateFormData.template3 = row.id;
                        this.templateFormData.merchantTemplateName3 = row.name;
                        break;
                    case 4: // 商品模板
                        this.templateFormData.goodstemplate = row.id;
                        this.templateFormData.goodsTemplateName = row.name;
                        break;
                }
                this.dialogTemplate = false; // 关闭弹窗
            },
            // 查看模板
            seeTemplate(row) {
                this.templateName = row.name;
                this.templateItemFormList = row.templateItemFormList || [];
                this.dialogTemplateInfo = true;
            }
        },
        created() {
            this.templateFormData = this.$route.query;
            this.findTemplateList();
        }
    };
</script>
<style lang="scss" scoped>
    .main {
        width: 1000px;
        // border: 1px solid #d5d5d5;
        // box-shadow: 0px 0px 10px 1px #f5f5f5;
    }
    .categoryBox {
        padding: 20px;
        // background-color: #f9f9f9;
        box-shadow: 0px 0px 21px 1px #f5f5f5;
    }
    .templateForm {
        padding: 20px;
        // border: 1px solid #d5d5d5;
        // box-shadow: 0px 0px 21px 1px #f5f5f5;
    }
    .typeTitle {
        line-height: 40px;
        padding: 10px;
        margin-bottom: 20px;
        span {
            padding: 0 5px;
            height: 20px;
            line-height: 20px;
            display: block;
            border-left: 3px solid #409eff;
        }
    }
    .templateBG {
        padding-top: 22px;
        // background-color: #f9f9f9;
        box-shadow: 0px 0px 21px 1px #f5f5f5;
        margin-bottom: 22px;
    }
    .templateTitle {
        line-height: 33px;
    }
    .overflowEllipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
